<template>
<transition name="hello" appear>
<li>
    <label>
      <input type="checkbox" :checked="obj.done" @change="check(obj.id)"/>
      <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
      <span v-show="!obj.isEdit">{{obj.title}}</span>
      <input 
      type="text" 
      :value="obj.title" 
      v-show="obj.isEdit" 
      @blur="objblur(obj)"
      ref="objinput"/>
    </label>
    <button class="btn btn-danger" @click="del(obj.id)">删除</button>
    <button v-show="!obj.isEdit" class="btn btn-edit" @click="edit(obj)">编辑</button>
  </li>
</transition>
  
</template>

<script>
import pubsub from 'pubsub-js'

export default {
  name: "item",
  props: ["obj"],
  methods: {
    del(id){
      //this.delobj(id)
      //this.$bus.$emit("delobj",id)
      pubsub.publish("delobj",id)
    },
    check(id){
      //this.checkobj(id)
       pubsub.publish("checkobj",id)
    },
    edit(obj){
      if(obj.hasOwnProperty('isEdit')){
        obj.isEdit=true
      }else{
         this.$set(obj,'isEdit',true)
      }
      this.$nextTick(function(){//下一轮执行
        this.$refs.objinput.focus()//获取焦点
      })
      
    },
    objblur(obj){
     //obj.title=this.$refs.objinput.value
     obj.isEdit=false
     this.$bus.$emit('updateobj',obj.id,this.$refs.objinput.value)
    }
  }
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover{
		background-color: #ddd;
	}
	
li:hover button{
		display: block;
	}
  .hello-enter-active {
  animation: gyl 1s linear;
}
.hello-leave-active {
  animation: gyl 1s linear reverse;
}
@keyframes gyl {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>